<template>
  <div class="finance">
    <div class="page-header">
      <h1>财务管理</h1>
    </div>
    
    <!-- 财务概览 -->
    <el-row :gutter="20" class="finance-overview">
      <el-col :span="6">
        <el-card>
          <div class="finance-item">
            <div class="finance-icon income">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <div class="finance-info">
              <h3>本月收入</h3>
              <p class="finance-value">¥{{ formatCurrency(monthlyIncome) }}</p>
              <span class="finance-trend up">
                <el-icon><CaretTop /></el-icon>
                15.2%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card>
          <div class="finance-item">
            <div class="finance-icon expense">
              <el-icon><Money /></el-icon>
            </div>
            <div class="finance-info">
              <h3>本月支出</h3>
              <p class="finance-value">¥{{ formatCurrency(monthlyExpense) }}</p>
              <span class="finance-trend down">
                <el-icon><CaretBottom /></el-icon>
                8.5%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card>
          <div class="finance-item">
            <div class="finance-icon profit">
              <el-icon><Coin /></el-icon>
            </div>
            <div class="finance-info">
              <h3>本月利润</h3>
              <p class="finance-value">¥{{ formatCurrency(monthlyProfit) }}</p>
              <span class="finance-trend up">
                <el-icon><CaretTop /></el-icon>
                22.7%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card>
          <div class="finance-item">
            <div class="finance-icon balance">
              <el-icon><Wallet /></el-icon>
            </div>
            <div class="finance-info">
              <h3>账户余额</h3>
              <p class="finance-value">¥{{ formatCurrency(accountBalance) }}</p>
              <span class="finance-trend neutral">-</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 搜索和筛选 -->
    <el-card class="search-card">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-select v-model="transactionType" placeholder="交易类型" clearable>
            <el-option label="收入" value="income" />
            <el-option label="支出" value="expense" />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 100%"
          />
        </el-col>
        <el-col :span="6">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索交易描述"
            prefix-icon="Search"
            clearable
          />
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="success" @click="handleExport">导出</el-button>
        </el-col>
      </el-row>
    </el-card>
    
    <!-- 财务流水 -->
    <el-card>
      <template #header>
        <span>财务流水</span>
      </template>
      <el-table :data="transactionList" style="width: 100%">
        <el-table-column prop="date" label="交易日期" width="120" />
        <el-table-column prop="type" label="交易类型" width="100">
          <template #default="{ row }">
            <el-tag :type="row.type === 'income' ? 'success' : 'danger'">
              {{ row.type === 'income' ? '收入' : '支出' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="交易描述" min-width="200" />
        <el-table-column prop="amount" label="金额" width="120">
          <template #default="{ row }">
            <span :class="row.type === 'income' ? 'text-success' : 'text-danger'">
              {{ row.type === 'income' ? '+' : '-' }}¥{{ formatCurrency(Math.abs(row.amount)) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="balance" label="余额" width="120">
          <template #default="{ row }">
            ¥{{ formatCurrency(row.balance) }}
          </template>
        </el-table-column>
        <el-table-column prop="category" label="分类" width="100" />
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="viewDetail(row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 模拟数据
const monthlyIncome = ref(125800.50)
const monthlyExpense = ref(45600.00)
const monthlyProfit = ref(80200.50)
const accountBalance = ref(256800.75)

const transactionType = ref('')
const dateRange = ref([])
const searchKeyword = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

const transactionList = ref([
  {
    id: 1,
    date: '2024-09-04',
    type: 'income',
    description: '商品销售收入 - iPhone 15 Pro Max',
    amount: 9999.00,
    balance: 256800.75,
    category: '销售收入'
  },
  {
    id: 2,
    date: '2024-09-04',
    type: 'expense',
    description: '采购成本 - iPhone 15 Pro Max',
    amount: -7500.00,
    balance: 246801.75,
    category: '采购支出'
  },
  {
    id: 3,
    date: '2024-09-03',
    type: 'income',
    description: '商品销售收入 - AirPods Pro 2',
    amount: 1999.00,
    balance: 254301.75,
    category: '销售收入'
  },
  {
    id: 4,
    date: '2024-09-03',
    type: 'expense',
    description: '物流费用 - 顺丰速运',
    amount: -150.00,
    balance: 254151.75,
    category: '物流费用'
  },
  {
    id: 5,
    date: '2024-09-02',
    type: 'income',
    description: '商品销售收入 - 小米电视',
    amount: 2999.00,
    balance: 257150.75,
    category: '销售收入'
  }
])

const formatCurrency = (value) => {
  return value.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}

const handleSearch = () => {
  console.log('搜索财务流水:', { type: transactionType.value, dateRange: dateRange.value, keyword: searchKeyword.value })
}

const resetSearch = () => {
  transactionType.value = ''
  dateRange.value = []
  searchKeyword.value = ''
}

const handleExport = () => {
  ElMessage.success('正在导出财务数据...')
}

const viewDetail = (row) => {
  console.log('查看详情:', row)
}

const handleSizeChange = (val) => {
  pageSize.value = val
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}
</script>

<style scoped>
.finance {
  padding: 0;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h1 {
  font-size: 24px;
  color: #333;
}

.finance-overview {
  margin-bottom: 20px;
}

.finance-item {
  display: flex;
  align-items: center;
}

.finance-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.finance-icon.income {
  background-color: #f0f9ff;
  color: #67c23a;
}

.finance-icon.expense {
  background-color: #fef0f0;
  color: #f56c6c;
}

.finance-icon.profit {
  background-color: #f6ffed;
  color: #52c41a;
}

.finance-icon.balance {
  background-color: #fff7e6;
  color: #e6a23c;
}

.finance-info h3 {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.finance-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.finance-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
}

.finance-trend.up {
  color: #67c23a;
}

.finance-trend.down {
  color: #f56c6c;
}

.search-card {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.text-success {
  color: #67c23a;
}

.text-danger {
  color: #f56c6c;
}
</style>
